<template>
  <div class="template-demo">
    <h1 class="page-title">模板组件演示</h1>

    <ExperimentLayout class="bg-white shadow-sm rounded-xl">
      <!-- 实验原理部分 -->
      <template #theory>
        <div class="theory-content">
          <p class="description">
            这是一个通用的实验数据处理模板系统，提供了一套标准化的组件用于构建各类物理实验的数据处理页面。
          </p>
          <div class="info-box">
            <h3 class="info-title">核心组件</h3>
            <ul class="component-list">
              <li>
                <span class="font-medium">ExperimentLayout</span>
                <span class="text-gray-600"
                  >- 标准实验页面布局，包含理论、数据、处理和分析四个部分</span
                >
              </li>
              <li>
                <span class="font-medium">DataTable</span>
                <span class="text-gray-600"
                  >- 数据记录表格，支持多列数据输入</span
                >
              </li>
              <li>
                <span class="font-medium">InputField</span>
                <span class="text-gray-600"
                  >- 通用输入字段，支持数值和文本输入</span
                >
              </li>
              <li>
                <span class="font-medium">StatisticsCard</span>
                <span class="text-gray-600">- 数据统计展示卡片</span>
              </li>
              <li>
                <span class="font-medium">Card</span>
                <span class="text-gray-600">- 通用内容容器</span>
              </li>
            </ul>
          </div>
        </div>
      </template>

      <!-- 数据记录部分 -->
      <template #data>
        <div class="data-section">
          <DataTable
            title="实验数据记录"
            :headers="tableHeaders"
            :show-actions="true"
            class="bg-white shadow-sm rounded-lg overflow-hidden"
            @load="loadSampleData"
            @clear="clearData"
          >
            <tr v-for="(row, index) in tableData" :key="index">
              <td>
                <InputField v-model="row.id" type="number" class="w-full" />
              </td>
              <td>
                <InputField
                  v-model="row.x"
                  type="number"
                  unit="cm"
                  class="w-full"
                />
              </td>
              <td>
                <InputField
                  v-model="row.t"
                  type="number"
                  unit="s"
                  class="w-full"
                />
              </td>
            </tr>
          </DataTable>

          <Card title="其他参数" class="bg-white shadow-sm rounded-lg">
            <div class="p-6">
              <div class="parameters-grid">
                <InputField
                  v-model="temperature"
                  label="环境温度"
                  type="number"
                  unit="°C"
                  class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
                />
                <InputField
                  v-model="pressure"
                  label="大气压强"
                  type="number"
                  unit="kPa"
                  class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
                />
                <InputField
                  v-model="humidity"
                  label="相对湿度"
                  type="number"
                  unit="%"
                  class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
                />
              </div>
            </div>
          </Card>
        </div>
      </template>

      <!-- 数据处理部分 -->
      <template #processing>
        <div class="statistics-grid">
          <StatisticsCard
            title="位移测量统计"
            class="bg-white shadow-sm hover:shadow-md transition-shadow rounded-lg"
            :statistics="[
              { label: '平均值', value: 25.3, unit: 'cm' },
              { label: '标准偏差', value: 0.2, unit: 'cm' },
              { label: '测量次数', value: 5 },
            ]"
          />
          <StatisticsCard
            title="时间测量统计"
            class="bg-white shadow-sm hover:shadow-md transition-shadow rounded-lg"
            :statistics="[
              { label: '平均值', value: 2.45, unit: 's' },
              { label: '标准偏差', value: 0.03, unit: 's' },
              { label: '测量次数', value: 5 },
            ]"
          />
        </div>
      </template>

      <!-- 误差分析部分 -->
      <template #error-analysis>
        <div class="error-analysis">
          <StatisticsCard
            title="实验结果分析"
            class="bg-white shadow-sm hover:shadow-md transition-shadow rounded-lg"
            :statistics="[
              { label: '计算值', value: 9.81, unit: 'm/s²' },
              { label: '标准值', value: 9.8, unit: 'm/s²' },
              { label: '绝对误差', value: 0.01, unit: 'm/s²' },
              { label: '相对误差', value: 0.1, unit: '%' },
            ]"
          >
            <div class="analysis-note">
              <p class="note-text">
                误差分析部分可以添加误差来源、改进方法等补充说明。
              </p>
            </div>
          </StatisticsCard>
        </div>
      </template>
    </ExperimentLayout>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ExperimentLayout from "../templates/ExperimentLayout.vue";
import Card from "../templates/Card.vue";
import DataTable from "../templates/DataTable.vue";
import InputField from "../templates/InputField.vue";
import StatisticsCard from "../templates/StatisticsCard.vue";

// 表格相关数据
const tableHeaders = [
  { key: "id", label: "序号", class: "w-24" },
  { key: "x", label: "位移 (cm)", class: "flex-1" },
  { key: "t", label: "时间 (s)", class: "flex-1" },
];

const tableData = ref([
  { id: 1, x: 0, t: 0 },
  { id: 2, x: 0, t: 0 },
  { id: 3, x: 0, t: 0 },
  { id: 4, x: 0, t: 0 },
  { id: 5, x: 0, t: 0 },
]);

// 环境参数
const temperature = ref(25.0);
const pressure = ref(101.3);
const humidity = ref(45);

// 数据操作方法
const loadSampleData = () => {
  tableData.value = [
    { id: 1, x: 25.1, t: 2.43 },
    { id: 2, x: 25.3, t: 2.45 },
    { id: 3, x: 25.4, t: 2.44 },
    { id: 4, x: 25.2, t: 2.46 },
    { id: 5, x: 25.5, t: 2.47 },
  ];
};

const clearData = () => {
  tableData.value = [
    { id: 1, x: 0, t: 0 },
    { id: 2, x: 0, t: 0 },
    { id: 3, x: 0, t: 0 },
    { id: 4, x: 0, t: 0 },
    { id: 5, x: 0, t: 0 },
  ];
};
</script>

<style scoped>
.template-demo {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
}

.page-title {
  @apply text-3xl font-bold tracking-tight text-gray-900 mb-8;
}

.theory-content {
  @apply space-y-6;
}

.description {
  @apply text-lg text-gray-600 leading-relaxed;
}

.info-box {
  @apply bg-blue-50 rounded-xl p-6 border border-blue-100;
}

.info-title {
  @apply text-xl font-semibold text-blue-900 mb-4;
}

.component-list {
  @apply space-y-3 text-gray-700;
}

.component-list li {
  @apply flex items-start space-x-2;
}

.component-list li::before {
  content: "•";
  @apply text-blue-500 font-bold mr-2;
}

.data-section {
  @apply space-y-8;
}

.parameters-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
}

.statistics-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.error-analysis {
  @apply space-y-6;
}

.analysis-note {
  @apply mt-6 pt-6 border-t border-gray-200;
}

.note-text {
  @apply text-sm text-gray-600 leading-relaxed;
}
</style>
